<template>
    <div class="tabNav">
        <div class="fl parent">
            <div class="btnTab" :class="{active:Product_current_seclected == index}" :data-id="item.id" :key="item.id" v-for="(item,index) in Product_tabList" @click="toggleBtn(item.components,index)">{{item.title}}
            <b @click.stop="deleteBtn(index)" v-show="item.delShow"></b>
            </div>
        </div>
        <div class="fr person">
            <span class="avatar"><img :src="activeimg" alt="头像"> </span>

            <router-link :to="{path: '/account'}" class="personal">{{personName}}</router-link>
            <span class="signOut" @click="signOut"></span>
        </div>
    </div>
</template>
<script>
    export default {
        data(){
            return {
                active:true,
                oneTab:'',
                routeName:'',
                cur:0,
                tabList:'',
                activeimg:'',
                personName:'',
            }
        },
        computed:{
            Product_current_seclected(){
                if(this.routeName == 'stroke'){
                    return this.$store.state.stroke.curSeclected;
                }else if(this.routeName == 'guider'){
                  return this.$store.state.guider.curSeclected;
                }else if(this.routeName == 'travelgency'){
                  return this.$store.state.travelgency.curSeclected;
                }else if(this.routeName == 'journal'){
                    return this.$store.state.journal.curSeclected;
                }else if(this.routeName == 'group'){
                  return this.$store.state.group.curSeclected;
                }else if(this.routeName == 'clients'){
                  return this.$store.state.clients.curSeclected;
                }

            },
            Product_tabList(){
                if(this.routeName == 'stroke'){
                   return this.$store.state.stroke.tabList;
                }else if(this.routeName == 'guider'){
                  return this.$store.state.guider.tabList;
                }else if(this.routeName == 'travelgency'){
                  return this.$store.state.travelgency.tabList;
                }else if(this.routeName == 'group'){
                  return this.$store.state.group.tabList;
                }else if(this.routeName == 'clients'){
                  return this.$store.state.clients.tabList;
                }else if(this.routeName == 'journal'){
                    return this.$store.state.journal.tabList;
                }

            },
        },
        props:['subNav'],
        watch:{
            subNav: function(val) { // 切换头部名称为二级导航名称
                if(this.routeName == 'stroke'){
                    if(val == '' || val == ' '){
                        val='行程管理';
                    }
                   return this.$store.state.stroke.tabList[0].title=val;
                }
                if(this.routeName == 'guider'){
                  if(val == '' || val == ' '){
                    val='导游管理';
                  }
                  return this.$store.state.guider.tabList[0].title=val;
                }
                if(this.routeName == 'clients'){
                  if(val == '' || val == ' '){
                    val='客户资料';
                  }
                  return this.$store.state.clients.tabList[0].title=val;
                }
                if(this.routeName == 'travelgency'){
                  if(val == '' || val == ' '){
                    val='旅行社';
                  }
                  return this.$store.state.travelgency.tabList[0].title=val;
                }
                if(this.routeName == 'journal'){
                  if(val == '' || val == ' '){
                    val='导游日志';
                  }
                  return this.$store.state.journal.tabList[0].title=val;
                }
                if(this.routeName == 'group'){
                  if(val == '' || val == ' '){
                    val='派团管理';
                  }
                  return this.$store.state.group.tabList[0].title=val;
                }
            }
        },
        methods:{
            jugeTab(){// tab信息 判断处于哪一个模块 去加载相应的self.tabList selected
                var self = this;
                var routeName = self.$route.name.toLowerCase();// 获取当前路由的信息
                self.routeName = routeName;
                switch (routeName){

                    case 'stroke':
                        self.oneTab = "行程管理";
                        // 恢复其他页面 vuex状态 初始值
                        self.$store.commit('DEFAULT_JOURNAL_TAB');//导游日志
                        self.$store.commit('DEFAULT_GUIDER_TAB');//导游管理
                        self.$store.commit('DEFAULT_TRAVELGENCY_TAB');
                        self.$store.commit('DEFAULT_GROUP_TAB');//派团管理
                        self.$store.commit('DEFAULT_CLIENTS_TAB');//
                        break;
                    case 'guider':
                      self.oneTab = "导游管理";
                      // 恢复其他页面 vuex状态 初始值
                      self.$store.commit('DEFAULT_STROKE_TAB');//行程
                      self.$store.commit('DEFAULT_JOURNAL_TAB');//导游日志
                      self.$store.commit('DEFAULT_TRAVELGENCY_TAB');
                      self.$store.commit('DEFAULT_GROUP_TAB');//派团管理
                      self.$store.commit('DEFAULT_CLIENTS_TAB');//
                      break;
                    case 'group':
                      self.oneTab = "派团管理";
                      // 恢复其他页面 vuex状态 初始值
                      self.$store.commit('DEFAULT_STROKE_TAB');//行程
                      self.$store.commit('DEFAULT_GUIDER_TAB');//导游管理
                      self.$store.commit('DEFAULT_TRAVELGENCY_TAB');
                      self.$store.commit('DEFAULT_JOURNAL_TAB');//导游日志
                      self.$store.commit('DEFAULT_CLIENTS_TAB');//
                      break;

                    case 'journal':
                        self.oneTab = "导游日志";
                        // 恢复其他页面 vuex状态 初始值
                        self.$store.commit('DEFAULT_STROKE_TAB');//行程
                        self.$store.commit('DEFAULT_TRAVELGENCY_TAB');
                        self.$store.commit('DEFAULT_GUIDER_TAB');//导游管理
                        self.$store.commit('DEFAULT_GROUP_TAB');//派团管理
                        self.$store.commit('DEFAULT_CLIENTS_TAB');//
                        break;
                    case 'travelgency':
                      self.oneTab = "旅行社";
                      // 恢复其他页面 vuex状态 初始值
                      self.$store.commit('DEFAULT_STROKE_TAB');//行程
                      self.$store.commit('DEFAULT_JOURNAL_TAB');
                      self.$store.commit('DEFAULT_GUIDER_TAB');//导游管理
                      self.$store.commit('DEFAULT_GROUP_TAB');//派团管理
                      self.$store.commit('DEFAULT_CLIENTS_TAB');//
                      break;
                    case 'clients':
                      self.oneTab = "客户资料";
                      // 恢复其他页面 vuex状态 初始值
                      self.$store.commit('DEFAULT_STROKE_TAB');//行程
                      self.$store.commit('DEFAULT_JOURNAL_TAB');
                      self.$store.commit('DEFAULT_GUIDER_TAB');//导游管理
                      self.$store.commit('DEFAULT_GROUP_TAB');//派团管理
                      self.$store.commit('DEFAULT_TRAVELGENCY_TAB');
                      break;
                }
            },
            toggleBtn(components,index){//TAB 切换
                if(this.routeName == 'stroke'){
                    this.$store.commit('TOGGle_STROKE_COMPONENT_BTN',index);
                    this.$emit('transferTab',components,index);
                }
                if(this.routeName == 'guider'){
                  this.$store.commit('TOGGle_GUIDER_COMPONENT_BTN',index);
                  this.$emit('transferTab',components,index);
                }
                if(this.routeName == 'test'){
                  this.$store.commit('TOGGle_TEST_COMPONENT_BTN',index);
                  this.$emit('transferTab',components,index);
                }
                if(this.routeName == 'travelgency'){
                  this.$store.commit('TOGGle_TRAVELGENCY_COMPONENT_BTN',index);
                  this.$emit('transferTab',components,index);
                }
                if(this.routeName == 'group'){
                  this.$store.commit('TOGGle_GROUP_COMPONENT_BTN',index);
                  this.$emit('transferTab',components,index);
                }
                if(this.routeName == 'clients'){
                  this.$store.commit('TOGGle_CLIENTS_COMPONENT_BTN',index);
                  this.$emit('transferTab',components,index);
                }
                if(this.routeName == 'journal'){
                    this.$store.commit('TOGGle_JOURNAL_COMPONENT_BTN',index);
                    this.$emit('transferTab',components,index);
                }
            },
            deleteBtn(index){//删除索引值对应的 tabelList数组元素
                if(this.routeName == 'stroke'){
                    this.$store.commit('DELETE_STROKE_BTN',index);
                }else if(this.routeName == 'guider'){
                  this.$store.commit('DELETE_GUIDER_BTN',index);
                }else if(this.routeName == 'test'){
                  this.$store.commit('DELETE_TEST_BTN',index);
                }else if(this.routeName == 'travelgency'){
                  this.$store.commit('DELETE_TRAVELGENCY_BTN',index);
                }else if(this.routeName == 'group'){
                  this.$store.commit('DELETE_GROUP_BTN',index);
                }else if(this.routeName == 'clients'){
                  this.$store.commit('DELETE_CLIENTS_BTN',index);
                }else if(this.routeName == 'journal'){
                    this.$store.commit('DELETE_JOURNAL_BTN',index);
                }
                this.$router.go(0);
            },
            signOut(){//退出登录
                var self = this;
                layer.confirm('是否退出账号?', {
                    btn: ['确定','取消'] //按钮
                }, function(){
                    layer.closeAll();
                    sessionStorage.removeItem('platform');//清除  用户信息
                    // 刷新页面  清除vuex的数据
                    setTimeout(function(){
                        self.$router.push({
                            path:'/'
                        });
                        window.location.reload();
                    },20)
                })
            }
        },
        mounted(){
            var self = this;
            self.jugeTab();
            // 判断有没有登录
            if(sessionStorage.length==0){
                self.$router.push({path:'/'})
            }else{
                self.personName = JSON.parse(sessionStorage.getItem('customer')).name;
                self.activeimg = JSON.parse(sessionStorage.getItem('customer')).face;
            }

        },
    }
</script>
<style lang="scss" scoped>
    .tabNav{
        border-bottom: 1px solid #e6e1df;
        .parent{
            max-width:85%;
        }
        height: 60px;
        line-height: 60px;
        overflow:hidden;
        color:#4e5e7e;
        font-size: 12px;
        background-color:#fff;
        margin-bottom: 30px;
        padding: 0 20px !important;
        .btnTab{
            color: #4e5e7e;
            font-size: 12px;
            text-align: center;
            height: 30px;
            line-height: 30px;
            display:inline-block;
            border:none;
            border-radius: 30px;
            margin-right: 10px;
            padding: 0 15px;
            background-color: #f7f7f7;
            cursor: pointer;

            b{
                width: 12px;
                height: 12px;
                display: inline-block;
                background: url('../../assets/images/del2.png') no-repeat center center;
                background-size: cover;
                margin-left: 8px;
                margin-top:-1px;
                cursor:pointer;
            }
            b:hover{
                background-image: url('../../assets/images/del3.png');
            }
        }
        .active{
            color: #fff;
            background-color: #09ba79;
            b{
                background-image: url('../../assets/images/del1.png');
            }
        }
    }
        /*个人 退出登录*/
    .person{
        height: 60px;
        line-height: 60px;
        .avatar{
            // padding:10px 22px;
            border-radius:50%;
            // background:url('../../assets/images/avatar.png') no-repeat center center;
            background-size: 16px;
            background-color:#dadada;
            overflow: hidden;
            display:inline-block;
            width: 38px;
            height: 38px;
            float: left;
            margin-top:12px;
            line-height: 0;
            text-align:center;
            vertical-align:middle;
            img{
                max-width: 100%;
                height: 100%;
                display: inline-block;
                font-size:12px;
                line-height: 2.5;

            }
        }
        .personal{
            border-right:1px solid #efecea;
            padding-right:12px;
            margin-right:20px;
            margin-left:10px;
        }
        .signOut{
            width:14px;
            height:16px;
            display:inline-block;
            background:url('../../assets/images/signOut.png') no-repeat center center;
            background-size:cover;
            cursor:pointer;
            margin-bottom: -3px;
        }
        .signOut:hover{
            background-image:url('../../assets/images/signOut2.png');
        }
    }

</style>
